﻿
@{
    ViewBag.Title = "QuestionIndex";
    Layout = "";
}



<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>登录页面</title>
    <meta charset="utf-8">
    <!--删除默认的苹果工具栏和菜单栏-->
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <!--控制状态栏显示样式-->
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <!--格式检测-->
    <meta content="telephone=no" name="format-detection" />
    <!--控制页面打开大小-->
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <script type="text/javascript" src="http://js.40017.cn/cn/min/??/cn/sl/snapping/zepto.js?v=2016"></script>
    <!-- 引入vue脚本 -->
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    <!--自定义样式-->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            /*min-width: 1386px;*/
        }

        input, select, textarea, button {
            vertical-align: middle;
            font-size: 100%;
            font-family: "Microsoft Yahei";
            outline: 0;
        }

        .page {
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        .head {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #3c8dbc;
            position: relative;
            z-index: 1030;
        }

        .left {
            box-sizing: border-box;
            min-height: 100%;
            width: 230px;
            z-index: 810;
            background-color: #222d32;
        }

        .pageCon {
            display: -webkit-box;
            display: flex;
            display: -webkit-flex;
            min-height: 100%;
        }

        .left ul li {
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 24px;
            color: #fff;
            cursor: pointer;
        }

        .right {
            width: 100%;
            min-height: 100%;
            background: #ECF0F5;
        }

        .none {
            display: none;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="head"></div>
        <div class="pageCon">
            <div class="left">
                <ul>
                    <li>问卷配置</li>
                    <li>问卷填写</li>
                    <li>问卷统计</li>
                </ul>
            </div>
            <div class="right">
                <!-- 主页进来 -->
                <div class="main">1111111111111111111</div>
                <!-- 配置页 -->
                <div class="configPage none">2222</div>
                <div class="fillPage none">333</div>
                <div class="countPage none">4444</div>
                        <script type="text/x-template" id="in-radio">
                            <div class="panel-body radio-body col-xs-1" ptype="ptype">
                                <div class="body-row">
                                    <span class="num">{{OrderNum}}</span>
                                    <div class="rowCont">
                                        <span><i v-if="IsRequired">*</i>{{QuestionTitle}}</span>
                                        <p v-for="item in QuestionItem">
                                            <input type="radio" value="item.Content" name="radio">
                                            <label>{{item.Content}}</label>
                                        </p>
                                    </div>
                                </div>
                                <div class="body-btn">
                                    <input type="button" class="edit btn" value="编辑">
                                    <input type="button" class="delete btn" value="删除">
                                </div>
                                <div class="body-conent">
                                    <div class="col-sm-1 col">
                                        <label for="">标题</label>
                                        <input type="text" class="tInput" v-model="QuestionTitle">
                                        <input type="checkbox" class="ischeck" v-model="IsRequired">
                                        <label for="" class="checkLabel">是否必填</label>
                                    </div>
                                    <table>
                                        <thead><tr><th>选项</th><th>操作</th></tr></thead>
                                        <tbody>
                                            <tr v-for="(item,index) in QuestionItem">
                                                <td><input type="text" class="tInput" v-model="item.Content"></td>
                                                <td class="trBtn">
                                                    <input type="button" class="add btn" value="新增" @click="QuestionItem.splice(index+1,0,{Content:''})">
                                                    <input type="button" class="delete btn" value="删除" @click="QuestionItem.splice(index,1)">
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </script>
                        <script type="text/x-template" id="in-checkbox">
                            <div class="panel-body checkboxlist-body col-xs-1" ptype="ptype">
                                <div class="body-row">
                                    <span class="num">{{OrderNum}}</span>
                                    <div class="rowCont">
                                        <span><i v-if="IsRequired">*</i>{{QuestionTitle}}</span>
                                        <p v-for="item in QuestionItem">
                                            <input type="checkbox" value="item.Content" name="checkbox">
                                            <label>{{item.Content}}</label>
                                        </p>
                                    </div>
                                </div>
                                <div class="body-btn">
                                    <input type="button" class="edit btn" value="编辑">
                                    <input type="button" class="delete btn" value="删除">
                                </div>
                                <div class="body-conent">
                                    <div class="col-sm-1 col">
                                        <label for="">标题</label><input type="text" class="tInput" v-model="QuestionTitle">
                                        <input type="checkbox" class="ischeck" v-model="IsRequired">
                                        <label for="" class="checkLabel">是否必填</label>
                                    </div>
                                    <table>
                                        <thead><tr><th>选项</th><th>操作</th></tr></thead>
                                        <tbody>
                                            <tr v-for="(item,index) in QuestionItem">
                                                <td><input type="text" class="tInput" v-model="item.Content"></td>
                                                <td class="trBtn">
                                                    <input type="button" class="add btn" value="新增" @click="QuestionItem.splice(index+1,0,{Content:''})">
                                                    <input type="button" class="delete btn" value="删除" @click="QuestionItem.splice(index,1)">
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </script>
                        <script type="text/x-template" id="in-text">
                            <div class="panel-body text-body" ptype="ptype">
                                <div class="body-row">
                                    <span class="num">{{OrderNum}}</span>
                                    <div class="rowCont">
                                        <span v-if="IsRequired"><i>*</i>{{QuestionTitle}}</span>
                                        <input type="text" value="">
                                    </div>
                                </div>
                                <div class="body-btn">
                                    <input type="button" class="edit btn" value="编辑">
                                    <input type="button" class="delete btn" value="删除">
                                </div>
                                <div class="body-conent">
                                    <div class="col-sm-1 col">
                                        <label for="">标题</label>
                                        <input type="text" class="tInput" v-model="QuestionTitle">
                                        <input type="checkbox" class="ischeck" v-model="IsRequired">
                                        <label for="" class="checkLabel">是否必填</label>
                                    </div>
                                </div>
                            </div>
                        </script>
                        <div class="main">
                            <div class="both" id="tem-info">
                                <div class="tem-info-container">
                                    <span class="panel-heading">模板信息</span>
                                    <div class="tem-info">
                                        <div class="body-conent">
                                            <div class="tem-info-col">
                                                <label for=""><span style="color: #FF0000">*</span>模板名称</label>
                                                <input type="text" class="tInput" v-model="quesTitle" id="TemName" />
                                            </div>
                                            <div class="tem-info-col">
                                                <label for="">描述</label>
                                                <textarea class="tInput" v-model="desc" id="TemDesc" rows="3" style=" height:auto; font-size 12px;line-height 1.5"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container">
                                    <span class="panel-heading">模板配置</span>
                                    <div class="all-result">
                                        <div is="item.component" test="item.cIndex" v-for="(item,index) in itemTemplate"></div>
                                    </div>
                                    <div class="form-group">
                                        <p id="msginfo" class="alert-info"></p>
                                        <input type="button" class="btn-save" value="保存" />
                                    </div>
                                </div>
                                <div class="toolBarDiv">
                                    <span class="panel-heading">控件箱</span>
                                    <ul class="tooList">
                                        <li id="drag_text" addType="input-text"><b></b>文本框</li>
                                        <li id="drag_radio" addType="input-radio"><b></b>单选</li>
                                        <li id="drag_checkboxlist" addType="input-checkbox"><b></b>多选</li>
                                    </ul>
                                </div>
                            </div>

                        </div>
            </div>
        </div>
    </div>
</body>

<script src="main.js"></script>
<script type="text/javascript">
    $('.left ul li').on('click',function(){
        var $index = $(this).index();
        $('.right div').eq($index + 1).removeClass('none').siblings().addClass('none');
    })
    
 

</script>

</html>


